<template>
    <div class="homeContent">
        <transition enter-active-class="animate__animated animate__fadeInDown"
            leave-active-class="animate__animated animate__fadeOutUp" appear>
            <page-header v-if="true" />
        </transition>
        <transition enter-active-class="animate__animated animate__fadeInLeft"
            leave-active-class="animate__animated animate__fadeOutLeft" appear>
            <pageLeft v-if="true" />
        </transition>
        <transition enter-active-class="animate__animated animate__fadeInRight"
            leave-active-class="animate__animated animate__fadeOutRight" appear>
            <pageRight v-if="true" />
        </transition>

        <transition enter-active-class="animate__animated animate__fadeInUp"
            leave-active-class="animate__animated animate__fadeOutDown" appear>
            <pageCenter v-if="true" />
        </transition>
    </div>
</template>

<script>
function adjustScale() {
    const baseWidth = 1920;
    const scale = window.innerWidth / baseWidth;
    document.body.style.transform = `scale(${scale})`;
}
window.addEventListener('resize', adjustScale);
import pageHeader from "./header/index.vue";
import pageLeft from "./left/index.vue";
import pageRight from "./right/index.vue";
import pageCenter from "./center/index.vue";
import 'animate.css/animate.min.css'
export default {
    components: {
        pageHeader,
        pageLeft,
        pageRight,
        pageCenter
    },
    data() {
        return {
        };
    },

    methods: {

    },
};
</script>

<style scoped lang="scss">
.homeContent {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    background-image: url("../../../assets/bigScreen/icons/bg.png");
    background-size: cover;
    overflow: hidden;

    .animate__animated {
        --animate-duration: 2s;
        --animate-delay: 1s;
    }
}
</style>